<script setup>
import Swipe from "@/views/home/components/Swipe.vue";
import ProductList from "@/views/home/components/ProductList.vue";
import LogoAndSearchNav from "@/components/LogoAndSearchNav.vue";
import {onBeforeMount, ref, provide} from 'vue'
import {getProductListRandomAPI} from "@/api/product.js";

// 商品列表
const productList = ref([]);
const productListLoading = ref(false);
const productListFinished = ref(false);
const productListError = ref(false);
onBeforeMount(async () => {
  // 异步更新数据
  const res = await getProductListRandomAPI(10)
  productList.value.push(...res)
  if (productList.value.length === 0) productListFinished.value = true
})
const onLoadProductList = async () => {
  productListLoading.value = true
  // 异步更新数据
  const res = await getProductListRandomAPI(10)
  productListLoading.value = false
  if (!res) {
    productListError.value = true
    return
  }
  productList.value.push(...res)
  // productListFinished.value = true
};
const productListRefreshing = ref(false);
const onRefreshProductList = async () => {
  // 清空数据
  // productList.value = []
  // 重新加载数据
  // 异步更新数据
  const res = await getProductListRandomAPI(10)
  productList.value.unshift(...res)
  productList.value = productList.value.slice(0, 10)
  if (productList.value.length === 0) productListFinished.value = true
  productListRefreshing.value = false
};
provide('homeProduct', {
  productList,
  productListLoading,
  productListFinished,
  productListError,
  onLoadProductList,
  productListRefreshing,
  onRefreshProductList
})
</script>

<template>
  <div class="home w-full h-full">
    <LogoAndSearchNav></LogoAndSearchNav>
    <Swipe></Swipe>
    <ProductList></ProductList>
  </div>
</template>

<style scoped lang="scss">

</style>